<ion-content class="page">
  <ion-slides #homeSlides pager="true" [options]="slideOpts" (ionSlideTransitionEnd)="onAutoplay()">
    <ion-slide *ngFor="let item of banners;index as i">
      <img [src]="item.imageUrl" />
    </ion-slide>
  </ion-slides>
  <ion-grid class="music-nav">
    <ion-row>
      <ion-col routerLink="/daily">
        <ion-icon name="calendar-number-outline"></ion-icon>
        <ion-label>每日推荐</ion-label>
      </ion-col>
      <ion-col>
        <ion-icon name="pulse-outline"></ion-icon>
        <ion-label>私人FM</ion-label>
      </ion-col>
      <ion-col>
        <ion-icon name="musical-note-outline"></ion-icon>
        <ion-label>精选歌单</ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-item lines="none">
    <ion-icon slot="end" name="caret-forward-outline"></ion-icon>
    <ion-label>
      推荐歌单
    </ion-label>
  </ion-item>
  <div class="sheet-row">
    <ion-col *ngFor="let item of tjSheet;index as i" size="4">
      <app-single-sheet [sheet]="item" (onPlay)="onPlay($event)"></app-single-sheet>
    </ion-col>
  </div>

  <ion-item lines="none">
    <ion-icon slot="end" name="caret-forward-outline"></ion-icon>
    <ion-label>
      民谣歌单
    </ion-label>
  </ion-item>
  <div class="sheet-row">
    <ion-col *ngFor="let item of mySheets;index as i" size="4">
      <app-single-sheet [sheet]="item" (onPlay)="onPlay($event)"></app-single-sheet>
    </ion-col>
  </div>
  <ion-item lines="none">
    <ion-icon slot="end" name="caret-forward-outline"></ion-icon>
    <ion-label>
      欧美歌单
    </ion-label>
  </ion-item>
  <div class="sheet-row">
    <ion-col *ngFor="let item of omSheets;index as i" size="4">
      <app-single-sheet [sheet]="item" (onPlay)="onPlay($event)"></app-single-sheet>
    </ion-col>
  </div>
<div style="height: 50px;"></div>
</ion-content>